<template>
    <div class="cus-image" @click="cusPreviewImage" :style="width + ';' + height">
      <el-image
          style="width: 100%; height: 100%"
          :src="src"
          :fit="fit"
          :alt="alt"
          :referrerPolicy="referrerPolicy"
          :zIndex="zIndex"
          :preview-src-list="previewSrcList"
          
      >
      </el-image>
      <span
          class="el-image-viewer__btn el-image-viewer__download"
          v-show="dnFlag"
          @click="dnImage"
      >
          <i class="el-icon-download"></i>
      </span>
    </div>
  </template>
  <script>
  export default {
      name: "cusImage",
      data() {
          return {
              dnFlag: false,
              wrapperElem: null,
              hidElClassNameLists: [
                  "el-image-viewer__mask",
                  "el-image-viewer__btn el-image-viewer__close",
                  "el-icon-close",
              ],
          };
      },
      props: {
          src: {
              type: String,
              default: "",
          },
          previewSrcList: {
              type: Array,
              default: function () {
                  return [];
              },
          },
          width: {
              type: String,
              default: "100%",
          },
          height: {
              type: String,
              default: "100%",
          },
          fit: {
              type: String,
              default: "",
          },
          alt: {
              type: String,
              default: "",
          },
          referrerPolicy: {
              type: String,
              default: "",
          },
          zIndex: {
              type: Number,
              default: 2000,
          },
      },
      methods: {
          cusPreviewImage() {
            console.log("我出发了gggg")
              this.dnFlag = true;
              this.checkElemlents();
          },
          checkElemlents() {
              this.$nextTick(() => {
                  let wrapper = document.getElementsByClassName(
                      "el-image-viewer__wrapper"
                  );
                  if (wrapper.length > 0) {
                      this.wrapperElem = wrapper[0];
                      this.cusClickHandler();
                  } else {
                      this.checkElemlents();
                  }
              });
          },
          cusClickHandler() {
              this.wrapperElem.addEventListener("click", this.hideCusBtn);
          },
          hideCusBtn(e) {
              let className = e.target.className;
              if (this.hidElClassNameLists.includes(className)) {
                  this.dnFlag = false;
              }
          },
          dnImage() {
              let imgUrl = document.getElementsByClassName(
                  "el-image-viewer__canvas"
              )[0].children[0].src;
              this.downloadImage(imgUrl);
          },
          // 下载图片，这里如果涉及到跨域需自行解决，我们设置的 CORS，文章最下方有跨域 NGINX 解决办法
          downloadImage(imgUrl) {
              let tmpArr = imgUrl.split("/");
              let fileName = tmpArr[tmpArr.length - 1];
              window.URL = window.URL || window.webkitURL;
              var xhr = new XMLHttpRequest();
              xhr.open("get", imgUrl, true);
              // 至关重要
              xhr.responseType = "blob";
              xhr.onload = function () {
                  if (this.status == 200) {
                      //得到一个blob对象
                      var blob = this.response;
                      var fileUrl = window.URL.createObjectURL(blob);
                      var a = document.createElement("a");
                      (document.body || document.documentElement).appendChild(a);
                      a.href = fileUrl;
                      if ("download" in a) {
                          a.download = fileName;
                      } else {
                          a.setAttribute("download", fileName);
                      }
                      a.target = "_self";
                      a.click();
                      a.remove();
                  }
              };
              xhr.send();
          },
      },
  };
  </script>
  <style >
  .cus-image {
      display: inline-block;

  }
  .el-image-viewer__download {
        top: 40px;
        right: 100px;
        width: 40px;
        height: 40px;
        font-size: 24px;
        color: #fff;
        background-color: #606266;
        z-index: 2001; /* 如果该组件需要传递 z-index 的值，这个值也需要做成动态的 props */
        cursor: pointer;
        position: fixed; 
    }
  </style>
  